<template>
  <div class="app-container">
      <a-card size="small" :bordered="false" class="box-card">
        <a-row justify="center" align='middle'>
          <a-col flex="100px">
              <div class="titleHeader" style="font-weight: bold;">数据分析</div>
          </a-col>
          <a-col flex= 'auto'>
          <div class="title_content">
            <span>统计周期：</span>
            <span><a-range-picker v-model:value="value1" /></span>
            <span>自定义</span>
            <span>最近7天</span>
            <span>最近14天</span>
          </div>
          </a-col>
          <a-col flex="100px">
            <a-button size='middle' class="search_Button confirm" type="primary" :icon="h(ExportOutlined)" @click="exportDate">导出数据</a-button>
          </a-col>
        </a-row>
      </a-card>
        <a-row justify='center' algin='middle' style="box-sizing: border-box;">
          <a-col flex='auto'>
            <div class="todo-item" v-for="(item, index) in todoItems" :key="index">
              <a-row :gutter="[8,8]" class="todo_content marginTop8">
                <a-col :span="18">
                  <a-card size="small" :bordered="false" class="box-card">
                    <div class='marginTop12 dataOverview'>
                      <a-row justify='center' algin='middle'>
                        <a-col flex="auto">
                          <div class="a_col_date">
                            <SvgIcon name="data-icon" color="#4CC87E" width="21px" height="21px"/>
                            <div style="color:#303133;margin-left:6px;">{{ item.newUsers}}</div>
                          </div>
                        </a-col>
                        <a-col flex="70px">
                          <a-button size='middle' class="search_Button confirm" type="primary" :icon="h(ExportOutlined)" @click="exportDate">导出数据</a-button>
                        </a-col>
                      </a-row>
                    </div>
                    <EchartsComes :chartOption="item.option" :chartStyle="chartStyle"/>
                  </a-card>
                </a-col>
                <a-col :span="6">
                  <a-card size="small" :bordered="false" class="box-card1">
                    <div v-if="item.option2">
                      <div class="pic_title" style="color:#303133;margin-left:6px">{{ item.newUsersChance}}</div>
                      <EchartsComes :chartOption="item.option2" :chartStyle="chartStyle"/>
                    </div>
                    <div v-else>
                      <div class="chart-container" v-for="(items,index) in item.list" :key="index">
                        <div class="chart-item">
                          <div class="chart-title">
                            <div class="chart-label">{{ items.a}}</div>
                            <div class="chart-label">
                              <ExclamationCircleOutlined />
                            </div>
                          </div>
                          <div class="chart-value">{{ items.b}}</div>
                          <div class="chart-percentage">日环比 {{ items.c }}<ArrowDownOutlined /></div>
                        </div>
                      </div>
                    </div>
                  </a-card>
                </a-col>
              </a-row>
            </div>
          </a-col>
        </a-row>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import EchartsComes from './EchartsComes.vue'
import { reactive, ref,toRaw,h,onMounted,onUnmounted,onBeforeUnmount, watchEffect,nextTick } from 'vue';
import { ExclamationCircleOutlined,ArrowDownOutlined } from '@ant-design/icons-vue';
import SvgIcon from '@/components/svgIcon.vue'
// VChart
const chartOption =ref([
  {
       tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        show:false,
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Thu1', 'Fri1', 'Sat1', 'Sun1','Sun2']
      },
      yAxis: {
        type: 'value',
        show:false,
        axisLabel: {
          formatter: '{value} 次'
        }
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260,230, 224, 218,55,400],
          itemStyle: {
            color: 'rgba(191, 234, 207, 1)'
          },
          type: 'line',
          symbol: "none",
          areaStyle: {
            normal: {
              color: {
                type: "linear", //设置线性渐变
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(191, 234, 207, 0)", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(191, 234, 207, 1)", // 0% 处的颜色rgba(191, 234, 207, 1)
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
            }
          }
        }
      ]
    }
])
const chartStyle = {
  width: '100%',
  height: '327px'
}
const todoItems = ref([
  {
    title: '584',
    total: '总量: 1.89万',
    newUsers: '新增用户(人)',
    newUsersChance: '用户次留存率',
    dailyIncrease: '30%',
    option:{
       tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
         top: '5%',
          left: 'center'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: 
        {
        // show:false,
        type: 'category',
        data: ['游戏1', '游戏2', '游戏3', '游戏4', '游戏5', '游戏6', '游戏7','游戏8', '游戏9', '游戏10', '游戏11','游戏12']
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          formatter: '{value}'
        }
      },
      series: [
        {
          name: 'Google',  
          type: 'bar',
          stack: 'Search Engine',
          emphasis: {
            focus: 'series'
          },
          data: [150, 230, 224, 218, 135, 147, 260,230, 224, 218,55,400],
          itemStyle: {
            color: 'rgba(191, 234, 207, 1)'
          },
          type: 'bar',
          symbol: "none",
          areaStyle: {
            normal: {
              color: {
                type: "linear", //设置线性渐变
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(191, 234, 207, 0)", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(191, 234, 207, 1)", // 0% 处的颜色rgba(191, 234, 207, 1)
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
            }
          }
        },
        {
          name: 'Bing',
          type: 'bar',
          stack: 'Search Engine',
          emphasis: {
            focus: 'series'
          },
          data: [150, 230, 224, 218, 135, 147, 260,230, 224, 218,55,400],
          itemStyle: {
            color: 'rgba(76, 200, 126, 1)'
          },
          type: 'bar',
          symbol: "none",
          areaStyle: {
            normal: {
              color: {
                type: "linear", //设置线性渐变
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(76, 200, 126, 1)", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(76, 200, 126, 1)", // 0% 处的颜色rgba(191, 234, 207, 1)
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
            }
          }
        }
      ]
    },
    option2:{
       tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            label: {
              normal: {
                show: true,
                position: 'center',
                color:'#4c4a4a',
                formatter: '{total|' + 200 +'}'+ '\n\r' + '{active|共发布活动}',
                rich: {
                  total:{
                    fontSize: 35,
                    fontFamily : "微软雅黑",
                    color:'#454c5c'
                  },
                  active: {
                    fontFamily : "微软雅黑",
                    fontSize: 16,
                    color:'#6c7a89',
                    lineHeight:30,
                  },
                }
              },
              // emphasis: {//中间文字显示
              //   show: true,
              // }
              emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight:"bold"
              }
             },
            },
            
            labelLine: {
              show: false
            },
            data: [
              // { value: 1048, name: 'Search Engine' },
              // { value: 735, name: 'Direct' },
              // { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ]
          }
        ]
    }
  },
  {
    title: '80128',
    total: '总量: 13.89万',
    newUsers: '活跃量(人)',
    newUsersChance: '新用户活跃量',
    dailyIncrease: '30%',
    list:[
      {
        a:"新用户",
        b:"28600",
        c:"3%",
      },
      {
        a:"老用户",
        b:"28600",
        c:"3%",
      },
      {
        a:"总用户",
        b:"28600",
        c:"3%",
      },
    ],
    option:{
       tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        // show:false,
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value',
        // show:false,
        axisLabel: {
          formatter: '{value} 次'
        }
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 120],
          itemStyle: {
            color: 'rgba(191, 234, 207, 1)'
          },
          type: 'line',
          symbol: "none",
          areaStyle: {
            normal: {
              color: {
                type: "linear", //设置线性渐变
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(191, 234, 207, 0)", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(191, 234, 207, 1)", // 0% 处的颜色rgba(191, 234, 207, 1)
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
            }
          }
        }
      ]
    }
  },
  {
    title: '68128',
    total: '总量: 11.89万',
    newUsers: '下载量(次)',
    newUsersChance: '下载量',
    dailyIncrease: '30%',
    option:{
       tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        // show:false,
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value',
        // show:false,
        axisLabel: {
          formatter: '{value} 次'
        }
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 55],
          itemStyle: {
            color: 'rgba(191, 234, 207, 1)'
          },
          type: 'line',
          symbol: "none",
          areaStyle: {
            normal: {
              color: {
                type: "linear", //设置线性渐变
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(191, 234, 207, 0)", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(191, 234, 207, 1)", // 0% 处的颜色rgba(191, 234, 207, 1)
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
            }
          }
        }
      ]
    },
     option2:{
       tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            label: {
              show:false,
              // normal: {
              //   show: true,
              //   position: 'center',
              //   color:'#4c4a4a',
              //   formatter: '{total|' + 200 +'}'+ '\n\r' + '{active|共发布活动}',
              //   rich: {
              //     total:{
              //       fontSize: 35,
              //       fontFamily : "微软雅黑",
              //       color:'#454c5c'
              //     },
              //     active: {
              //       fontFamily : "微软雅黑",
              //       fontSize: 16,
              //       color:'#6c7a89',
              //       lineHeight:30,
              //     },
              //   }
              // },
              // emphasis: {//中间文字显示
              //   show: true,
              // }
              emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight:"bold"
              }
             },
            },
            
            labelLine: {
              show: false
            },
            data: [
              // { value: 1048, name: 'Search Engine' },
              // { value: 735, name: 'Direct' },
              // { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' ,itemStyle: { color: '#4CC87E' }},
              { value: 300, name: 'Video Ads' ,itemStyle: { color: '#E0F5E8' }}
            ]
          }
        ]
    }
  },
]);

  const chartRef = ref(null);
  let chartInstance = null;
  onMounted(() => {
    nextTick(() => {
      const chartDom = chartRef.value
      if(chartDom){
        chartInstance = echarts.init(chartRef.value);
        chartInstance.setOption(getChartOption());
      }
    })
    window.addEventListener('resize', handleResize);
  });
  onBeforeUnmount(() => {
    window.removeEventListener('resize', handleResize);
    if (chartInstance != null) {
      chartInstance.dispose();
    }
  });
  watchEffect(() => {
    if (chartInstance) {
      chartInstance.resize();
    }
  });
  const getChartOption=()=> {
    return {
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['06/29', '06/30', '07/01', '07/02', '07/03', '07/04', '07/05', '07/06', '07/07']
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          formatter: '{value} 次'
        }
      },
      series: [{
        name: '下载量',
        type: 'line',
        smooth: true,
        data: [1000, 800, 600, 1500, 1800, 2000, 1200, 1000, 1500]
      }]
    };
  }
  const handleResize=() =>{
    if (chartInstance) {
      chartInstance.resize();
    }
  }

// 导出数据
const exportDate = ()=>{
  console.log(111,'exportDate');
}

const doAction = (e,record) => {
  console.log(111,'start');
  console.log(e,'e');
  console.log(record,'record');
  if(e ==='applyForRemoval'){
    console.log(1111,'applyForRemoval');
    applyForRemovalModal.value =true
    // formRef.value.resetFields();
    // formState.screenshot =[]
  }else if(e ==='update'){
    state.loading = true;
    // ajax request after empty completing
    setTimeout(() => {
      state.loading = false;
      // state.selectedRowKeys = [];
    }, 1000);
  }else if(e ==='delete'){
    console.log('delete: ', "delete");
    // Modal.confirm({
    // title: 'Are you sure delete this task?',
    // icon: createVNode(ExclamationCircleOutlined),
    // content: `Some descriptions + ${record.name }`,
    // okText: 'Yes',
    // okType: 'danger',
    // cancelText: 'No',
    // onOk() {
    //   console.log('OK',record);
    //   formRef.value
    //   .validate()
    //   .then(() => {
    //     console.log('values', formState, toRaw(formState));
    //     applyForRemovalModal.value = false
    //   })
    //   .catch(error => {
    //     console.log('error', error);
    //   });
    // },
    // onCancel() {
    //   console.log('Cancel');
    // },
  // });
  }
};

// 分页
</script>
<style lang="less" scoped>
@import url('./index.less');
</style>
<style scoped>
.margin20{
  margin-top: 8px;
}
.dataOverview{
  height: 32px;
  font-family: PingFang SC, PingFang SC;
  font-weight: bolder;
  font-size: 10px;
  color: #3C3C3C;
  line-height: 32px;
  margin-left: 20px;
}
.a_col_date{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: rgba(76, 200, 126, 1);
}
.pic_title{
  text-align: center;
  font-weight: bolder;
  font-size: 18px;
}
.wrapper {
  width: 100%;
  height: 100%;
}
.svg-container {
  /* vertical-align: middle; */
  /* display: inline-block; */
  width: 10px;
  height: 10px;
}
</style>